<template>
	<view class="cate-list">
		<view
			class="cate-item flex align-center justify-between"
			@tap="
				changeCate({
					name: '全部商品',
					id: ''
				})
			"
		>
			<view class="u-flex-1">全部商品</view>
			<image class="arrow" src="/static/right.png" mode="widthFix"></image>
		</view>
		<view class="cate-item flex align-center justify-between" @tap="changeCate(item)" v-for="(item, index) in cateList" :key="index">
			<view class="u-flex-1">{{ item.name }}</view>
			<image class="arrow" src="/static/right.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		cateList: {
			type: Array,
			default: () => []
		}
	},
	methods: {
		changeCate(item) {
			this.$emit('clickCate', item);
		}
	}
};
</script>

<style scoped lang="scss">
.cate-list {
	background: #fff;
	padding: 0 28upx;
	.cate-item {
		color: #1c1c1e;
		font-size: 32upx;
		height: 100upx;
		padding: 0 20upx;
		border-bottom: 1px solid #d8d8d8;
		.arrow {
			width: 28upx;
			height: 28upx;
			display: block;
		}
	}
}
</style>
